Introduction

logo-utl.jpg
Michel Damiens
mail : michel.damiens@gmail.com
site web : utl.manthano.fr

Ce site s’affiche en mode diapo : pour passer d’une page à la suivante ou à la précédente utiliser les touches « flèche droite » ou « flèche gauche » de votre clavier.
Pour le moment il est « en construction » avec de nombreux « bugs » : par exemple les menus risquent de ne pas fonctionner correctement.

Le contenu de cet atelier

Orienté vers la construction de sites internet et la programmation

  • construction de pages d’un site en utilisant
    • html, css et javascript à l’aide d’un éditeur de textes (vsCodium)
    • un serveur http et le langage php
    • un gestionnaire de bases de données (sqlite)
  • initiation aux outils informatiques au programme de l’éducation nationale :
    • geogebra : logiciel de géométrie dynamique
    • snap! (scratch) : initiation à l’algorithmique et à la programmation
    • python : langage de programmation très puissant

Pré-requis

La participation aux activités de cet atelier suppose une maîtrise suffisante de l’outil informatique :

  • être à l’aise avec le système de fichiers de votre ordinateur : sauvegarder et retrouver les documents que vous créez
  • être capable de télécharger, d’installer et de mettre à jour des applications
  • connaître l’utilisation des logiciels de base :
    • messagerie électronique (vous aurez souvent à récupérer des documents que je vous enverrai par mail)
    • navigateur web (Firefox conseillé)

Les outils nécessaires

Nous utiliserons essentiellement des logiciels libres disponibles à la fois pour les systèmes d’exploitation Linux, Windows et Mac

  • un navigateur internet : Firefox
  • un éditeur de textes : VsCodium
  • gestionnaire de base de données : sqlite

Celles et ceux d’entre vous qui ont utilisé ces logiciels l’an dernier n’ont pas à les réinstaller ; ils peuvent par contre les mettre à jour si nécessaire.

Sqlite

Installation

Gestionnaire de bases de données Sqlite3
Interface graphique SqliteBrowser

Méthode de travail

dossier de travail

  • Créer un dossier sur votre ordinateur qui contiendra tous les fichiers qui seront créés au cours des séances de l’atelier
  • Vous assurer que vous savez y accéder à partir du navigateur web

documentation

Vous aurez très souvent besoin de consulter la documentation des logiciels. Je vous indiquerai les liens vers les sites les plus pertinents.

Sondage

Développement web

Bases de données   20231117

serveur http php sql.png

Motivation

Exemple 1 : site web affichant vos photos ; l’affichage sur une page donnée pouvant être filtré selon certains critères : année, lieu (gps ?), circonstances, contenu, ...
Ces critères peuvent être asoociés à des « tags », ajoutés « à la main » pour chaque photo ou groupe de photos, ou récupérés à partir des métadonnées exif des photos si votre appareil est réglé pour les fournir.
Exemple 2 : site web permettant de gérér une bibliothèque avec un système de prêts aux usagers
Remarques :

  • il est évident qu’il existe des utilitaires (applications ou sites) permettant de faire ça ; l’objectif dans cet atelier n’est pas de construire une nouvelle application qui rivalise avec ces utilitaires (encore qu’on puisse s’approcher de certaines fonctionnalités ou en imiter un sous-ensemble contenant celles qui nous sont utiles), mais de comprendre comment cela fonctionne.
  • la difficulté va être d’interfacer les pages web du site avec la base de données : pour cela on aura besoin (en plus de ce qui a été fait l’an dernier) d’un serveur et du langage php

SERVEUR http -> PHP -> pages web
SERVEUR sqlite -> SQL -> données injectées dans les pages web

Petit historique

Les bases de données (database) et les systèmes de gestion de bases de données (SGBD) apparaissent dans les années 60 (Charles Bachman, prix Turing 1973) peu après l’invention des moyens de stockages efficaces et de grande capacité (1956 - disques durs).
On prend conscience de la nécessité de séparer les données de leur traitement.
En 1970 le modèle mathématique des bases de données relationnelles est mis au point (Edgar F. Codd, prix Turing 1981), ce qui fournit aussi les éléments nécessaires pour un langage d’interrogation (SQL) développé entre 1970 et 1980 par IBM et Oracle.
Actuellement, IBM DB2, Oracle Database, MySQL, PostgreSQL et Microsoft SQL Server sont les principaux systèmes de gestion de base de données sur le marché.
Les applications des bases de données sont innombrables et omniprésentes : gestion des informations médicales, billetteries, vente en ligne, bibliothèques, antivirus, comptabilité, moteurs de recherche, intelligence artificielle...
Le développement du Web à partir des années 80 va voir se répandre l’utilisation de bases de données à l’intérieur des pages html par l’intégration du SQL par des préprocesseurs comme PHP ou Python.

Exemple

Voyons sur un exemple ce qui différencie conceptuellement une base de données d’un classeur Calc (de LibreOffice) ou Excel (de Microsoft Office)
Considérons une bibiothèque qui possède :

  • une liste de livres à prêter avec, pour chaque livre :
    • titre
    • auteur(s)
    • année d’édition
    • catégorie (roman, essai, ...)
  • une liste d’usagers avec, pour chaque usager :
    • nom
    • prénom
    • date de naissance
    • adresse mail

et qui voudrait gêrer informatiquement les prêts (date d’emprunt, date de retour)
Solution « tableur »
gestion-bibliothèque-tableur
Un tableau, avec comme colonnes toutes les « rubriques » indiquées ci-dessus (titre du livre, auteur du livre, ..., nom usager, ... , une colonne indiquant la date du prêt, une pour la date de retour.
Inconvénient : il faut répéter les informations pour chaque livre prêté.
Problème : comment faire pour les emprunts multiples d’une même personne à une date donnée et pour les emprunts d’une même personne à plusieurs dates ?
Solution « base de données »

  • une table avec les livres et un champ « identifiant » pour chaque livre
  • une table avec les usagers et un champ « identifiant » pour chaque usager
  • une « table des prêts », donc chaque enregistrement est un lien entre l’identifiant d’un usager et l’identifiant d’un livre avec en plus un champ pour la date d’emprunt et un pour la date de reto

Définitions

Une base de données est un ensemble de tables reliées par des colonnes (champs) communes.
Chaque table est un ensemble de lignes (enregistrements) et de colonnes (champs).
À l’intersection d’une ligne est d’une colonne se trouve la valeur de l’enregistrement pour le champ correspondant.

Un gestionnaire de bases de données (par exemple sqlite) est une applications qui permet de gérer la base de données, c’est à dire :

  • créer, modifier, supprimer, sauvegarder des bases de données
  • créer et supprimer des tables, modifier leur structure (liste et caractéristiques des champs)
  • ajouter, modifier, supprimer des enregistrements dans une table
  • interroger la base de données pour en extraire des informations

Toutes les actions du gestionnaire peuvent s’exécuter à l’aide de requêtes SQL.
Il existe aussi des interfaces graphiques : sqlitebrowser (/DB Browser for Sqlite), Base de LibreOffice, Access de Microsoft... pour effectuer ces actions.
On va utiliser sqlitebrowser

Syntaxe SQL

Documentation

Référence officielle sqlite (en anglais) : https://sqlite.org/lang.html
Tutoriel sqlite (en anglais) : https://www.sqlitetutorial.net/
Tutoriel SQL (en français) : https://sql.sh/ (utilise SQL plutôt que SQLite, mais pour ce qu’on va en faire cette année les différences sont minimes)

Création, suppression et modification de table

Création

CREATE TABLE nomTable (
nomCol1 type nonNul? autoIncrément?,
nomCol2 type nonNul? autoIncrément?,
...
PRIMARY_KEY (nomCol),
FOREIGN_KEY (nomCol) REFERENCES nomTable(nomCol)
) ;

Suppression

DROP TABLE nomTable1, nomTable2, ... ;

Modification

ALTER TABLE nomTable ADD nomCol AFTER nomCol1 ;
ALTER TABLE nomTable DROP nomCol ;

Création et modification d’enregistrement

INSERT INTO et DELETE FROM
-- EXEMPLES pour les commandes INSERT INTO (ajout d'entregistrements) et DELETE FROM (suppression d'enregistememt)
-- Ajout d'un nouvel usager (certaines colonnes seulement)
INSERT INTO usagers (nom, prénom) VALUES ("Damiens","Michel") ; -- il n'est pas nécessaire de mettre toutes les colonnes
                -- ni de les mettre dans l'ordre des colonnes de la base ; les colonnes non utilsées auront la valeur NULL
SELECT * FROM usagers ORDER BY id DESC ; -- vérification ; on remarque que l'id est automatiquement complété
-- Ajout de plusieurs usagers (certaines colonnes seulement)
INSERT INTO usagers (id, nom, prénom) VALUES (501,"Dupuis", "Anne"), (502,"Durand", "Marie") ;
-- Ajout de plusieurs usagers (toutes les colonnes)
INSERT INTO usagers 
    VALUES ("Dupuis", "Anne", "2000-12-12", "dupuis.anne@free.fr"), 
           ("Durand", "Marie","1960-01-22", "durand.marie@gmail.com") ;
DELETE FROM usagers WHERE id >= 501 ;
UPDATE

Sélection

Sur une seule table
-- afficher les noms de tous les livres
SELECT titre FROM livres ; -- les résultats sont affichés dans l'ordre de la table
-- afficher les auteurs et titres de tous les livres 
SELECT auteur, titre FROM livres ; -- les colonnes sont affichées dans l'ordre de la requête et non dans l'ordre de la table
-- afficher toutes les colonnes pour tous les livres
SELECT * FROM livres ;  
-- afficher toutes les colonnes pour les 3 premiers livres 
SELECT * FROM livres LIMIT 3 ; -- ajouter OFFSET 2 pour voir la différence
-- afficher l'auteur et l'éditeur pour les livres dont le titre est Alice au pays des merveilles
SELECT auteur, éditeur FROM livres WHERE titre = "Alice au pays des merveilles" ; -- écrire alice à la place d'Alice
-- afficher l'auteur, le titre et l'éditeur pour les livres dont le titre se termine par eilles
SELECT auteur, titre, éditeur FROM livres WHERE titre LIKE "%eilles" ; -- % remplace n'importe quelle suite de lettres
-- afficher l'auteur, le titre et l'éditeur pour les livres dont le titre contient mer
SELECT auteur, titre, éditeur FROM livres WHERE titre LIKE "%mer%" ; -- essayer avec "% mer %"
-- afficher l'auteur, le titre et l'éditeur pour les livres dont l'éditeur est Flammarion, classés dans l'ordre des auteurs
SELECT auteur, titre, éditeur FROM livres WHERE éditeur = "Flammarion" ORDER BY auteur ; -- ajouter DESC si on veut dans
                                                                                        -- l'ordre décroissant                                            
-- même chose que ci-dessus, les 5 derniers seulement
SELECT auteur, titre, éditeur FROM livres WHERE éditeur = "Flammarion" ORDER BY auteur DESC LIMIT 5 ;                                            
-- 2 conditions
SELECT auteur, titre, éditeur FROM livres WHERE éditeur = "Flammarion" AND titre LIKE "%col%" ; --remplacer AND par OR                                           
Sur plusieurs tables
SELECT livres.id, livres.auteur, usagers.nom FROM livres, usagers WHERE livres.id = usagers.id ;
SELECT livres.id, livres.auteur, usagers.nom FROM livres JOIN usagers ON livres.id = usagers.id ;  
SELECT usagers.nom, usagers.prénom, prêts.dateEmprunt, prêts.dateRetour
    FROM usagers 
    JOIN prêts ON usagers.id = prêts.id_usager 
    ORDER BY usagers.nom ;
SELECT usagers.nom, usagers.prénom, prêts.dateEmprunt, prêts.dateRetour
    FROM usagers 
    JOIN prêts ON usagers.id = prêts.id_usager 
    WHERE JulianDay(dateRetour) - JulianDay(dateEmprunt) > 30
    ORDER BY usagers.nom ;
SELECT usagers.nom, usagers.prénom, COUNT(*)
    FROM usagers 
    JOIN prêts ON usagers.id = prêts.id_usager 
    WHERE JulianDay(dateRetour) - JulianDay(dateEmprunt) > 30
    GROUP BY usagers.nom
    -- HAVING COUNT(*) > 10
    -- ORDER BY usagers.nom 
    ORDER BY COUNT(*) DESC ;

L’éditeur vsCodium

L’éditeur vsCodium qui va nous permettre d’écrire les pages composant un site web ; il possède un système d’extensions permettant de l’adapter à nos besoins.
Remarque : dans vsCodium, la roue dentée en bas de la barre latérale gauche permet d’accéder aux fonctions Paramètres (Ctrl-,), Extensions (Ctrl-Maj-X), Palette de commandes (Ctrl-Maj-P)

Installation

L’installateur de votre système doit s’ouvrir automatiquement (sinon double-cliquer sur le fichier téléchargé).
Si l’installation ne fonctionne pas, d’autres méthodes sont expliquées ici : https://vscodium.com/#install

Paramétrages

Extensions à installer

• pour mettre l’interface en français :
– ouvrir le menu des extensions (combinaison de touches Ctrl-Maj-x ou bien clic sur l’icône à gauche de l’écran représentant 4 petits carrés, dont un détaché des autres)
– dans la boite de recherche en haut, taper french et choisissez French language pack
– dans la fenêtre de droite cliquer sur installer

  • ensuite ouvrir l’outil Palette de commandes (Ctrl-Maj-P), choisir Configurer la langue d’affichage et choisir français

• de la même manière,
– en tapant html dans la boîte de recherche, installez l’extension HTML CSS Support (cette extension facilite l’écriture des pages web)
– en tapant browser dans la boîte de recherche, installez l’extension Open in browser (cette extension permet d’ouvrir les pages web créées à partir de vsCodium)
Nous installerons plus tard d’autres extensions, au fur et à mesure de nos besoins.

Paramètres

dans vsCodium utiliser Paramètres (Ctrl-,), taper word dans la fenêtre de saisie, puis mettre le paramètre word wrap à on

Utilisation

Créer un dossier dans lequel vous mettrez tous les documents que vous allez créer avec vsCodium (que ce soit des fichiers html, css, javascript, python, ...)
Quelques astuces
Si vous tapez lorem10 suivi de TAB ou ENTER un texte de 10 mots en « pseudo latin » s’affiche

Quelques ajustements concernant Windows ou Linux

Pages web   20240112

Généralités

La documentation sur le site de mozilla/firefox : https://developer.mozilla.org/fr/ (menus « références » et « guide », items « html », « css », « javascript ») ; une icone en haut à droite de chaque page permet d’avoir la documentation en français.
Principe de base : séparation

  • de la structure (html),
  • de la présentation (css),
  • de l’interactivité dynamique avec l’utilisateur (javascript)

Le code html

Le code html de la page a plusieurs fonctions

  • il structure « logiquement » l’ensemble des informations à afficher en sections, paragraphes, tableaux, listes, ...
  • il indique au navigateur certaines méta-informations nécessaires pour l’affichage (langue utilisée, liens vers les feuilles de style, liens vers les scripts, ...)

En particulier, il ne s’occupe pas directement de la présentation visuelle (couleurs, positionnement, ...) qu’il va déléguer aux feuilles de styles (css), ni de l’interaction avec l’utilisateur, qu’il va déléguer aux feuilles de scripts (javascript).
Le composant fondamental du langage html est l’élément html qui se présente (avec des variations) sous la forme : <balise attributs>contenu</balise>
Remarque : quand la page est affichée par le navigateur, seul le contenu est affiché.

Exemples

<h1>exemple de titre</h1>

élément indiquant un titre de niveau 1 (balise <h1>) ; le texte qui s’affiche comme titre sera exemple de titre ; </h1> est la balise de fermeture

<p>
  voici une première ligne, 
  <br>et voici la ligne suivante
</p>

<p> est une balise de paragraphe, fermée par </p>
<br> est une balise indiquant un saut de ligne (elle n’a pas de balise fermante)
Le texte entre <p> et </p> s’affichera sur deux lignes

<img src="mon image.jpg">

<img> est une balise d’image ; elle n’a pas de balise fermante ; elle a un attribut src dont la valeur est le nom du fichier image à afficher
Remarque : contrairement au principe qui préconise de distinguer la structure (html) et le style (css), il est possible (mais non recommandé) d’associer un attribut style aux balises

<p style="color:blue">
  ...
</p>
Le texte du paragraphe (ici indiqué par ...) sera écrit en bleu.
Nous verrons ensuite comme réaliser ceci à l'aide d'une feuille de style.

Complément : structure de la page et feuilles de style

Structure de base de la page

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>titre de la page</title>
    <link rel="stylesheet" href="site.css">
  </head>
  <body>
  </body>
</html>

Organisation du bloc <body>

L’organisation dans body : div, section, article, p

Feuille de style   20240126

Grammaire des feuilles de style et lien avec les éléments html : id et class

Exemple de style : les boites flexibles

Les conteneurs flexibles

Une boite devient un conteneur flexible s’il lui est associée la règle css

display: flex ; 

Le modèle flexbox est un modèle d’affichage pour les éléments de type boîte.
C’est un modèle unidimensionnel : les éléments d’un conteneur flexible sont disposés sur un seul axe, (en ligne ou en colonne), cet axe pouvant ou non se « répandre » sur plusieurs lignes (ou colonnes).

Règles css applicables aux conteneurs flexibles
display: flex ;               
flex-direction: row ;         /* direction et sens du flot (définit l'axe principal) :
                                 row, row-reverse, column, column-reverse :  */
flex-wrap: wrap ;             /* passage à la ligne : wrap, nowrap, wrap-reverse */
justify-content: flex-start ; /* répartition sur l'axe principal :
                                 flex-start, flex-end, center, space-between, space-around, space-evenly */
align-items: stretch ;        /* alignement sur l'axe secondaire :
                                 flex-start, flex-end, center, stretch, baseline */
align-content: normal ;       /* répartition sur l'axe secondaire :
                                 flex-start, flex-end, center, space-between, space-around,
                                 stretch, baseline, first-baseline, last-baseline */
row-gap : 10px ;              /* distance entre les lignes */
column-gap: 20px ;            /* distance entre les colonnes */
/*
La propriété align-content n'est utile que si on est en mode wrap et qu'il y a plusieurs lignes.
Pour les propriétés justify-content, align-items et align-content
on peut ajouter une valeur : safe (ou nosafe) qui empêche (ou permet) les débordements.
*/
Les éléments flexibles

Les éléments contenus dans un conteneur flexible sont appelés éléments flexibles
Les règles css applicables à un élément flexible sont :

order: 1 ;                  /* modifie la position de l'élément */
flex-grow: 1 ;              /* facteur pour la capacité de l'élément à augmenter */
flex-shrink : 1 ;           /* facteur pour la capacité de l'élément à diminuer */
flex-basis: 20% ;           /* taille par défaut :
                               longueur ou mot-clé (auto, content, max-content, min-content, fit-content) */
align-self: flex-end ;      /* modifie l'alignement sur l'axe secondaire défini par align-items :
                               flex-start, flex-end, center, stretch, baseline */

Pour flex-grow, flex-shrink et flex-basis, on utilisera plutôt le raccourci :

flex: 2 1 auto ;             /* grow shrink basis ;
                                si on ne met que le premier ou les deux premiers ,
                                les autres sont choisies "intelligemment" */
Résumé
css flex résumé.png

Structure d’une page

Dans la page index.html qui présente un site de bibliothèque on a choisi une organisation du type décrit ci-dessous.
Chaque article va contenir :

  • le titre d’un livre
  • une image de ce livre
  • un ou plusieurs paragraphes qui résument ce livre

En outre la page est divisée en deux sections :

  • la première section présente les nouveautés
  • la deuxième section contient tous les livres

En réalité, tous les livres vont être contenus dans une base de données et le serveur va construire la page dynamiquement en allant chercher les informations dans la base.

Les blocs de structure (exemple)

body
	header
    section
  		article
    	article
    	...
    	article
    section
  		article
    	...
    	article

C’est sur ces blocs que va agir la feuille de style pour les positionner dans la page, par exemple en mode flexible (flex)
On distingue les blocs conteneurs (par exemple section) et les blocs éléments de ces blocs contenus (article).
header et chacune des sections sont des blocs éléments du conteneur body

Les éléments (blocs de contenu)

Par exemple, on peut avoir pour chaque article une organisation du type

article
	h1    
    img
    p
    p

Installation d’un serveur   20240209

Qu’est-ce qu’un serveur ?

architecture client-serveur.jpeg
On se représente souvent un serveur comme un ordinateur distant qui envoie des informations. On confond ainsi la logiciel serveur et le poste qui l’exécute.
Un serveur est en fait une application (un programme) qui exécute (en général sans interruption) un service permettant d’échanger des informations entre lui et un client. A chaque application serveur sur un ordinateur distant correspond donc une application client sur les postes locaux.
Il y a différents types de services, proposés par des serveurs spécialisés : mail, envoi et partage de fichiers ou partage de périphériques, distribution des adresses dans un réseau, bases de données, pages web ; chacun correspond en général à un ou plusieurs protocoles de communication particuliers :

  • pop, imap et sftp pour les mails,
  • ftp, ssh, nfs pour les fichiers,
  • dhcp pour les adresses dans un réseau,
  • http pour les pages web,
    ...

Serveur web (http)

comparatif utilisation serveurs web.jpg
Celui qui nous intéresse dans le cadre de la création de sites est le serveur http qui envoie des pages web.
Différents applications proposent des serveurs http : Microsoft Web Server (IIS), Google Web Server, Lighthttpd, Nginx, ...
Les logiciels clients http les plus courants sont les navigateurs internet (Firefox, Internet Explorer, Edge, Chrome, ...)
Nous utiliserons le logicel serveur http Apache qui est libre, gratuit, multi-plateforme.

Pourquoi un serveur ?

Quelle différence entre créer une page web (localement, ou à distance sur un serveur) et utiliser un serveur pour générer une page web ?
Localement (sur le poste client), pour des raisons de sécurité, la page web n’a pas le droit d’accéder directement aux fichiers de l’ordinateur local. Elle ne peut pas, par exemple, lire le contenu des dossiers.
Par contre, sur le poste distant, le serveur a accès (à travers un langage comme php par exemple) à toutes les ressources du système dans un environnement contrôlé par le serveur (et paramétré par l’administrateur du serveur). En particulier, un dossier du poste (document_root) contenant les pages du site sera géré par le serveur.
Le langage php, sur le serveur, va permettre de traiter la requête du client et d’y répondre en générant dynamiquement une page html en fonction des informations envoyés par le client et des données stockées sur le serveur.
Remarquons que, pour les tests par exemple, on peut installer un logiciel serveur et un logiciel client sur le même poste local.

Installation locale du serveur Apache

On va installer xampp qui contient Apache (serveur web), MariaDB (base de données), Php (langage de programmation) et d’autres applications.

Pour Windows

Pour Ubuntu

sudo nautilus
  • dans le gestionnaire de fichiers qui apparaît chercher le fichier que vous venez de télécharger
  • vérifier qu’il est exécutable : clic droit sur le fichier, propriétés, onglet permissions, cocher la case Exécution Autoriser l’exécution du fichier comme un programme
  • double-cliquer sur ce fichier ; le serveur va être installé dans le dossier /​opt/lampp/
  • dans un terminal taper les lignes suivantes afin que le serveur démarre automatiquement lorsque vous utilisez ubuntu :
sudo  ln  -s  /opt/lampp/lampp  /etc/init.d/lampp
sudo  update-rc.d  lampp  defaults

Lancement et paramétrage du serveur

Quand l’installation est terminée, il reste à lancer le serveur et à le paramétrer ; tout ceci se fait à l’aide d’un panneau de contrôle.

Lancer le serveur

Pour Windows

Pour ouvrir la panneau de contrôle, cliquer sur xampp-control dans le menu des applications installées
Dans la ligne Apache, cliquez sur le bouton Start dans la colonne Actions

Pour Ubuntu

Pour ouvrir le panneau de contrôle, taper dans un terminal : *sudo /opt/lampp/manager-linux-x64.run

  • cliquez sur l’onglet Manage Servers (gérer les serveurs)
  • si la ligne Apache Web Server indique Running, tout va bien, le serveur fonctionne ; sinon, sélectionnez cette ligne et cliquez sur le bouton Start ; après quelques instants le statut doit passer à Running

Paramétrer le serveur

Pour Windows

Le serveur qu’on vient d’installer est configuré par défaut pour servir les pages web qui se trouvent dans le dossier c:\xampp\htdocs
Pour voir la page d’accueil (qui s’appelle index.php) il faut :

  • ouvrir votre navigateur (Firefox par exemple)
  • taper localhost dans la barre d’adresse

Vous devez alors voir la page d’accueil de xampp.
Ce que nous voulons en fait, c’est afficher une page d’accueil pour notre site. Pour cela il faut paramétrer le serveur.
Dans la panneau de contrôle :

  • cliquer sur le bouton Config en haut à droite et cochez Apache dans la fenêtre Autostart of modules (si vous avez un message d’erreur, allez dans votre explorateur de fichier puis : clic droit sur le fichier d’application xampp-control, Exécuter en tant qu’administrateur)
  • cliquez sur le bouton Config dans la ligne d’Apache et ouvrez le fichier httpd.conf

Attention : ce fichier texte contient l’ensemble des paramètres qui permettent au serveur de fonctionner correctement ; il est donc nécessaire de réaliser les modifications avec soin.
On va indiquer où se trouvent les fichiers du site que nous voulons afficher.
Pour trouver le dossier contenant vos fichiers sur votre ordinateur, ouvrez le gestionnaire de fichier, sélectionnez ce dossier, clic droit, propriétés, emplacement
Si par exemple votre dossier se nomme monSiteWeb et que l’emplacement indique C:\Users\Pc\Documents\Utl, il faut modifier deux lignes dans le fichier httpd.conf
Il faut modifier 2 lignes :

  • chercher la ligne (normalement vers le ligne 250) contenant DocumentRoot « C:\xampp\htdocs » et remplacer cette ligne par DocumentRoot *« C:\Users\Pc\Documents\Utl\monSiteWeb »
  • remplacer la ligne suivante qui contient <Directory « C:\xampp\htdocs »> par <Directory « C:\Users\Pc\Documents\Utl\monSiteWeb »>

Sauvegarder le fichier de configuration (avec la combinaison de touches Ctrl-s par exemple). Vous pouvez maintenant fermer l’éditeur.
Revenir au panneau de contrôle du serveur, sélectionnez la ligne Apache Web Server et cliquer sur le bouton Restart (ou bien Stop puis Start)
Il faut maintenant que le dossier que vous avez indiqué pour héberger votre site (par exemple « C:\Users\Pc\Documents\Utl\monSiteWeb ») contienne un fichier nommé index.php
Pour cela :

  • si vous avez déjà dans ce dossier un fichier qui s’appelle index.html, renommez-le en index.php
  • sinon, créez dans ce dossier un fichier texte contenant simplement un mot comme « Bonjour » (ou un texte court) et sauvegardez-le sous le nom index.php

Il vous reste à ouvrir votre navigateur internet, mettre localhost dans la barre d’adresse pour afficher cette page d’accueil de votre site.
Si cela fonctionne, vous n’aurez plus à vous occuper du serveur (sinon pour la lancer au démarrage).
La suite va consister à créer les fichiers (html, css, php, ...) qui vont constituer votre site.

Pour Ubuntu

Le serveur qu’on vient d’installer est configurer par défaut pour servir les pages web qui se trouvent dans le dossier /opt/lampp/htdocs
Pour voir la page d’accueil (qui s’appelle index.php) il faut :

  • ouvrir votre navigateur (Firefox par exemple)
  • taper localhost dans la barre d’adresse

Vous devez alors voir la page d’accueil de xampp.
Ce que nous voulons en fait, c’est afficher une page d’accueil pour notre site. Pour cela il faut paramétrer le serveur.
Dans la panneau de contrôle :

  • sélectionnez la ligne Apache Web Server et cliquez sur le bouton Configure
  • dans la fenêtre qui apparaît, cliquez sur le bouton Open Conf File
  • dans la fenêtre Question, choisir OUI

S’ouvre alors l’éditeur de texte de votre système (gedit sous ubuntu) qui va vous permettre de modifier le fichier de configuration.
Attention : ce fichier texte contient l’ensemble des paramètres qui permettent au serveur de fonctionner correctement ; il est donc nécessaire de réaliser les modifications avec soin.
On va indiquer où se trouvent les fichiers du site que nous voulons affichere.
On va supposer que votre nom d’utilisateur sous Ubuntu est michel et que vous voulez placer les fichiers de votre site dans votre dossier personnel dans un sous-dossier nommé utl d’un dossier nommé monSiteWeb
Il faut modifier 4 lignes :

  • chercher la ligne (normalement vers le ligne 230) contenant DocumentRoot « /opt/lampp/htdocs » et remplacer cette ligne par DocumentRoot *« /home/michel/monSiteWeb/utl »
  • remplacer la ligne suivante qui contient <Directory « /opt/lampp/htdocs »> par <Directory « /home/michel/monSiteWeb/utl »>
  • chercher la ligne (normalement vers le ligne 170) qui contient User daemon et remplacer cette ligne par User michel
  • remplacer la ligne suivante qui contient Group daemon par Group michel

Sauvegarder le fichier de configuration (avec la combinaison de touches Ctrl-s par exemple). Vous pouvez maintenant fermer l’éditeur.
Revenir au panneau de contrôle du serveur, sélectionnez la ligne Apache Web Server et cliquer sur le bouton Restart (ou bien Stop puis Start)
Il faut maintenant que le dossier que vous avez indiqué pour héberger votre site (par exemple /home/michel/monSiteWeb/utl) contienne un fichier nommé index.php
Pour cela :

  • si vous avez déjà dans ce dossier un fichier qui s’appelle index.html, renommez-le en index.php
  • sinon, créez dans ce dossier un fichier texte contenant simplement un mot comme « Bonjour » (ou un texte court) et sauvegardez-le sous le nom index.php

Il vous reste à ouvrir votre navigateur internet, mettre localhost dans la barre d’adresse pour afficher cette page d’accueil de votre site.
Si cela fonctionne, vous n’aurez plus à vous occuper du serveur (sinon pour la lancer au démarrage).
La suite va consister à créer les fichiers (html, css, php, ...) qui vont constituer votre site.

Affichage de la page d’accueil par défaut

dans un navigateur : http://localhost ou bien simplement localhost ou bien http://127.0.0.1

Paramétrage du serveur

Principes

Le serveur Apache va chercher les pages du site dans un dossier appelé document_root ; il n’a accès à aucun autre dossier. Par défaut, sous Windows, ce dossier est le dossier htdocs contenu dans le dossier d’installation de xampp (par exemple : c:\xampp\htdocs). De même, sous Ubuntu, c’est /​opt/lampp/htdocs/.
En général on va modifier ce choix pour lui faire correspondre le dossier dans lequel on mettre nos pages web.

Modification de DocumentRoot

Cela se fait avec le panneau de contrôle.

Sous Windows

Il va falloir indiquer au serveur le dossier où il doit chercher les pages web que vous souhaitez utiliser (de dossier est appelé DocumentRoot).
Par défaut ce dossier est : c:\xampp\htdocs. Ce qui est mis dans ce dossier sera servi à l’adresse http://localhost
Procédure pour modifier DocumentRoot
Il faut d’abord que vous identifiez clairement le chemin du dossier dans lequel vous avez mis jusqu’ici les fichiers (html, css, images) utilisées dans vsCodium
Par exemple :
c:\

Sous Ubuntu

L’application est installée dans :

/opt/lampp

qui n’est pas accessible à l’utilisateur courant
Par défaut, le dossier DocumentRoot est

/opt/lampp/htdocs

Pour modifier cela, dans le panneau de contrôle : Manage Servers - Apache Web Server - Configure - Open Conf file
Ceci ouvre httpd.conf qu’il faut modifier en deux endroits : (vers la ligne 230 ?)

  • remplacer dans la ligne commençant par DocumentRoot le chemin indiqué entre guillements par le chemin du dossier dans lequel vous allez mettre votre site : par exemple pour moi « /media/DATA/MesDocs/Devel/projets/utl/atelier informatique »
  • idem dans la ligne (suivante ?) commençant par <Directory

Exemple : en ce qui me concerne cela va donner :
DocumentRoot « /media/DATA/MesDocs/Devel/projets/utl/atelier informatique/02-construction sites web/serveur »
<Directory « /media/DATA/MesDocs/Devel/projets/utl/atelier informatique/02-construction sites web/serveur »>
Pour Ubuntu : il faut modifier en plus les deux lignes (175 et 176 ?) contenant User daemon et Group daemon en remplaçant daemon par votre nom d’utilisateur ubuntu ; en ce qui me concerne cela donne User michel et Group michel

Pour terminer, ouvrez le panneau de contrôle de xampp, arrêtez le serveur et relancez-le

Éléments de base du PHP   20240503

Principes de base

Le dossier (et ses sous-dossiers) que vous avez désigné comme étant DocumentRoot va contenir les pages de votre site web.
En local, en ouvrant votre navigateur sur l’adresse localhost le serveur va chercher un fichier index.php (ou index.html) et va l’afficher.
Vous pouvez aussi afficher un fichier html ou php qui s’appelle par exemple ex.php en utilisant localhost/ex.php ou le chemin de ce fichier (après localhost) s’il est dans un sous-dossier.
Les fichiers php peuvent contenir du html mais, la plupart du temps ce html est mêlé à des bloc écrits en langage javascript.
Le code php permet, entre autres,

  • d’écrire « dynamiquement » du texte ou du html
  • d’accéder aux ressources du serveur : en général aux dossiers de DocumentRoot
  • d’accéder à des bases de données
  • ...

Premier exemple

Un bloc php est contenu entre les balises <?php et *?>
Si vous insérez dans une page vide ou dans une page exemple.hml qui contient déjà du code html (que vous avez renommée exemple.php) le bloc suivant, le serveur va traduire tout ça en html et servir la page ainsi obtenue.

<?php
 echo "bonjour" ;
 echo "<br>" ;
 echo date("m.d.Y") ;
 echo "<br>" ;
/* on affiche tous les fichiers du dossier courant
$fichiers = scandir(".") ;
print_r($fichiers) ;
echo "<br>" ;
*/
/* on affiche tous les noms des fichiers du dossier courant */
$fichiers = glob("*.*") ;
foreach ($fichiers as $f) {
echo $f . "<br>" ;
}
/* on a affiche toutes les images du dossier courant */
$images = glob("*.jpg") ;
foreach ($images as $f) {
    echo "<img src=" . "'" . $f . "'" . ">" ;
} 
?>

Programmation Python

Introduction

Qu’est-ce que programmer ?

Programmer c’est créer un algorithme et le traduire en un programme écrit dans un langage de programmation, par exemple python (mais aussi : C, lisp, fortran, pascal, java, ...

Algorithme

Un algorithme est la description structurée, en « pseudo-langage » humain, d’une suite d’actions que l’on veut faire exécuter à un ordinateur. Ces actions portent sur des données et produisent des données.
Cela présuppose que l’on sait à priori ce que l’ordinateur est capable de faire.
Dans un premier temps on va supposer qu’il est capable :
● d’utiliser des nombres, des chaines de caractères (phrases) et des listes (de nombres, de chaines et de listes)
● d’affecter un nom (variable) aux données qu’il manipule
● de demander à l’utilisateur de lui fournir des données
● d’afficher une donnée
● de transformer des données par certaines fonctions (commandes ou opérations)
● de répéter une opération
● d’exécuter une opération seulement quand une condition est vérifiée (ce qui nécessite un type de données particulier : les booléens)

Programme

Un programme utilise uniquement les mots et la grammaire du langage (formel) de programmation dans lequel il est écrit.
Les mots et la grammaire du langage de programmation, strictement définis, reflètent les actions que l’ordinateur est capable de réaliser.
Remarquons cependant que l’ordinateur a besoin que le programme soit traduit en langage binaire ; cela se fait de deux manières différentes :
● par compilation (pour les langages comme l’assembleur ou le C) : le compilateur transforme l’ensemble du programme en binaire puis le processeur exécute le code obtenu
● par interprétation (pour les langages comme python) : l’interpréteur exécute le programme en le transformant au fur et à mesure en binaire.

Installation du langage

Linux (Ubuntu)

  • python3 est pré-installé
  • taper dans un terminal :

sudo apt install python-is-python3

Windows

télécharger : https://www.python.org/downloads/release/python-3121/
puis installer le fichier téléchargé (soit en choisissant cette option à la fin du téléchargement, soit en double-cliquant sur le fichier téléchargé)
attention : au moment de l’installation cocher les 2 cases en bas de la fenêtre, en particulier la case : ajouter python au chemin (add python to path)

Installation d’un éditeur de textes

Pour écrire et exécuter les programmes on va au début utiliser l’éditeur IDLE, intégré au langage.
Si vous utilisez déjà un autre éditeur (Edupython, online-python, ...), vous pouvez continuer à l’utiliser. Le langage sera le même ; il faudra simplement adapter les explications à l’interface. N’hésitez pas à me contacter en cas de difficulté.
documentation : https://docs.python.org/fr/3/library/idle.html

Installation pour Linux (Ubuntu)

dans un terminal : sudo apt install idle
une icone est créée dans la liste de vos applications (icone 9 point en bas du dock à gauche)

Installation pour Windows

installé en même temps que Python ; un dossier est créé dans la liste des applications : ce dossier contient à la fois l’éditeur et le langage

Paramétrage

Idle est composé de (au moins) deux fenêtres : l’une pour l’écriture des programmes (edit), l’autre pour l’exécution (shell ou console).
Options - configure IDLE :
Fonts : en bas de la fenêtre on peut modifier la taille des caractères
Windows : cocher At Startup open edit window
Shell/Ed : cocher *At start of run (F5) No Prompt

Fonctionnement de l’environnement python

Python en ligne de commande

(On n’utilisera pas cette méthode, très vite trop restrictive)
Sous Windows, on peut ouvrir une console python en tapant py dans la ligne de commande :
clic droit sur l’icone Windows, Exécuter, taper cmd et valider, puis taper py ;
pour sortir de la console python, taper exit(),
puis taper exit pour sortir de la ligne de commande.
Sous Linux, taper python ou python3 dans un terminal (qu’on ouvre avec Ctrl-Alt-t)

Utilisation de Idle

Si vous avez paramétré Idle comme indiqué ci-dessus, quand vous cliquez sur l’icône de lancement de Idle vous ouvrez une page (la page d’édition) dans laquelle vous allez pouvoir taper les programmes.
Quand vous aurez écrit un programme, taper sur la touche F5 pour l’exécuter : cela va ouvrir une deuxième fenêtre (le shell, ou console, ou fenêtre d’exécution) dans laquelle le programme s’exécute.

Le langage Python

python-plan.png
La documentation de Python en français se trouve ici : https://docs.python.org/fr/3/ (en particulier au départ les parties « tutoriel » et « référence du langage »)
Ce site : https://python.sdv.univ-paris-diderot.fr/01_introduction/ contient (à mon avis) une très bonne introduction à Python

Premiers exemples en python

Exemple 1

si vous tapez dans l’éditeur idle

print("bonjour")

et que vous valider (c’est à dire appuyez sur ENTRÉE)
le texte bonjour (sans les guillemets) s’affiche dans la fenêtre d’exécution, puis passe à la ligne ; l’indicateur >>> apparaît dans la marge, signifiant que l’exécution s’est terminée et que l’interpréteur python attend la prochaine instruction.
Il faut alors retourner dans le fenêtre d’édition pour écrire d’autres instructions.
print est une instruction d’affichage ; « bonjour » est une donnée de type chaîne de caractères

Exemple 2

x = 10
print(x)

définit une variable x et lui affecte la valeur 10
print(x) va afficher 10 dans la fenêtre d’exécution
remarque : vous allez aussi avoir le résultat de l’instruction précédente (bonjour) ; en effet, en appuyant sur F5 on exécute tout le contenu de l’éditeur.
pour éviter ceci il faut mettre un # au début de la ligne print(« bonjour ») pour indiquer que vous ne voulez pas qu’elle soit exécutée ; on dit que la ligne est commentée :

# x = 10

= est une instruction d’affectation, 10 est une donnée de type nombre entier (on peut utiliser aussi des nombres réels comme 3.14, appelé donnée de type flottant en python)
exercices :
remplacez x par x + 13 dans la ligne print(x) et ré-exécutez ; examinez ce qui se passe
recommencez en remplaçant
x par 2 * x + 5
x par x // 6
x par x % 6
x par x * 2

Exemple 3

remarque : si vous voulez empêcher dans la suite d’exécuter ce qui précède, vous pouvez mettre # devant chaque ligne ; autre manière (commentaire multi-lignes) consiste à mettre 3 guillemets avant et 3 guillemets après chaque ensemble de lignes qu’on veut invalider.
exemple :

"""
print("bonjour")
x = 10
print(x)
"""

Instruction de saisie

rep = input("comment vous appelez-vous ? ")
print(rep)

Ceci ouvre une ligne de saisie commençant par comment vous appelez-vous ? et attend que vous tapiez quelque chose - dans la fenêtre d’exécution (et que vous validiez)
Ce que vous avez tapé est affecté à la variable rep puis affiché.
Pour quelque chose d’un peu plus sophistiqué :

rep = input("comment vous appelez-vous ? ")
print("vous vous appelez "  + rep)

va concaténer la chaîne « vous vous appelez  » avec votre réponse.
input est une instruction de saisie
On remarque que + est è la fois un opérateur d’addition (pour les nombres) et un opérateur de concaténation (pour les chaînes de caractères)
Exercice : écrire un programme python qui demande votre prénom, puis (séparément) votre nom et affiche les deux séparés par un espace

Exemple 4 : introduction aux boucles et aux conditions

Boucle for

for i in range(1, 10):
    print(i)

va afficher les uns en dessous des autres les nombres 1, 2, 3, 4, 5, 6, 7, 8, 9 ; en effet :
range(1, 10) désigne l’intervalle des nombres entiers de 1 inclus à 5 exclu
for i in range(1, 5): (signe deux-points obligatoire à la fin ce cette ligne) signifie que la variable i (qu’on appelle un compteur) va prendre successivement toutes ces valeurs et que pour chacune de ces valeurs i, l’instruction qui suit (print i) va être exécutée.
On remarque que, quand on tape ENTREE après for in in range(1, 10) l’éditeur passe à la ligne et indente la ligne suivante : ceci est très important car structure la boucle : tout ce qui sera indenté en-dessous de la ligne for sera exécuté par la boucle for
Essayez :

for i in range(1, 10):
        print(i)
        print(i + 5)
print("terminé")

puis :

for i in range(1, 10):
    print(i)
    print(i + 5)
    print("terminé")

pour comprendre le rôle et l’importance de l’indentation

Boucle for avec une condition

préalable : l’opérateur % désigne le reste de la division (par exemple 7 % 3 donne 1 car lorsqu’on effectue le division entière de 7 par 3 on a un reste égal à 1) ; en particuler on peut tester si en entier x est par en calculant x % 2 : si le résultat est 0 c’est que x est pair, si le résultat est 1 c’est que x est impair

for i in range(1, 10):
    if x % 2 == 0:
        print(x)

ne va afficher que les nombres pairs.
Il est important de constater :

  • que la boucle for porte maintenant sur les 2 lignes qui suivent
  • que la condition if porte sur la ligne print(x) qui est donc indentée par rapport à if et donc doublement indentée par rapport à for
  • que la ligne de la condition if se termine par deux-points comme pour for
  • que la condition « le reste de la division de x par 2 est égal à 0 » s’écrit x % 2 == 0 et non x % 2 = 0 (observez le double signe =) : en effet par exemple a = 0 signifie qu’on affecte à la variable a la valeur 0, tandis que a==2 signifie qu’on compare a avec 2

Projet 1   20240112

Deviner un nombre choisi par l’ordinateur
Le programme choisit au hasard un nombre entre 1 et 100 ; vous devez deviner ce nombre en proposant une réponse.
Le programme vous indique si votre réponse est correcte, trop grande ou trop petite.
Il compte le nombre de coups joués et, lorsque vous avez trouvé, affiche ce nombre de coups.

Version 1

# le langage python de base ne contient pas de fonctions permettant de choisir des nombres au hasard
# il est nécessaire d'utiliser un module nommé random
# depuis ce module on va importer une fonction nommée randint : randint(a,b) renvoie un nombre entier n au hasard avec a ≤ b ≤ b
from random import randint
nombre = randint(1, 100)
réponse = int(input("que choisissez-vous ? "))  # input renvoie la réponse de l'utilisateur sous la forme d'une chaîne de caractères
                                                # il faut donc la convertir en nombre entier avec int pour pouvoir ensuite la comparer avec nombre
if réponse == nombre:
    print("gagné")
else:
    print("perdu, javais choisi " + str(nombre)) # str permet de convertir un nombre en chaîne de caractères (str(11) donne "11") 

Version 2

from random import randint
nombre = randint(1, 100)
réponse = int(input("que choisissez-vous ? "))
if réponse == nombre:
    print("gagné")
else:
    if réponse > nombre:
        print("perdu, trop grand, javais choisi " + str(nombre))
    else:
        print("perdu, trop petit, javais choisi " + str(nombre))

Version 3

from random import randint
nombre = randint(1, 100)
réponse = int(input("que choisissez-vous ? "))
nbCoups = 1
while réponse != nombre:
    nbCoups = nbCoups + 1
    if réponse > nombre:
        print("trop grand, recommencez !")
    else:
        print("trop petit, recommencez !")
    réponse = int(input("que choisissez-vous ? "))
print("gagné en " + str(nbCoups) + " coups")

Version 4

from random import randint
def Jeu():
    nombre = randint(1, 100)
    réponse = int(input("que choisissez-vous ? "))
    nbCoups = 1
    while réponse != nombre:
        nbCoups = nbCoups + 1
        if réponse > nombre:
            print("trop grand, recommencez !")
        else:
            print("trop petit, recommencez !")
        réponse = int(input("que choisissez-vous ? "))
    print("gagné en " + str(nbCoups) + " coups")
Jeu()

Exercices

Exercice 1
Introduire un paramètre pour la fonction jeu permettant de choisir le maximum pour le nombre choisi par le programme.
Exercice 2
Écrire un programme proposant de jouer plusieurs fois pour améliorer son score

Correction des exercices   20240126

def AfficheDiviseurs(n):
    for d in range(1, n + 1):
        if n % d == 0:
            print(d)

def AfficheSiPremier(n):
    compteurDiviseurs = 0
    for d in range(1, n + 1):
        if n % d == 0:
            compteurDiviseurs = compteurDiviseurs + 1
    if compteurDiviseurs == 2:
        print(str(n) + " est premier")
    else:
        print(str(n) + " n'est pas premier")

 # autre solution
 
 def AfficheSiPremier1(n):
     if n == 1:
         print(str(n) + " n'est pas premier")
     else:
         ok = True
         for d in range(1, n):
             if n % d == 0:
                 ok = False
         if ok:
             print(str(n) + " est premier")
         else:
             print(str(n) + " n'est pas premier")

Remarques : amélioration des programmes
Dans AfficheSiPremier1, la boucle continue à s’effectuer après la rencontre d’un diviseur, ce qui est inutile ; on peut mettre une instruction break juste après ok = False qui aura pour effet de sortir immédiatement de la boucle. Tester AfficheSiPremier1(100000000) avec break et sans break
De même dans AfficheSiPremier, il peut être utile de mettre une instruction

if nombreDiviseurs == 3:
    break

après nombreDiviseurs = nombreDiviseurs + 1

Les listes

Introduction

Les données utilisées jusqu’ici sont de type « numérique » (int ou float), « chaîne de caractères » (str) et booléen (True, False). Ce sont des types simples.
La liste est un type de données composées : elle peut (récursivement) contenir des objets de tous types.
(Nous verrons plus tard qu’il existe d’autres types de données composées : tuples, dictionnaires, ensembles, classes).

Exemples de listes

Une liste s’écrit ente [ et ], ses éléments étant séparés par une virgule. L’ordre des éléments est significatif et il peut y avoir des éléments identiques (ce qui distingue une suite d’un ensemble au sens mathématique).
Par analogie avec les mathématiques, on verra qu’on peut définir une liste de deux manières différentes :

  • en extension : en énumérant ses éléments
  • en compréhension : en la définissant par des propriétés vérifiées par ses éléments.
# création de listes "en extension"
liste1 = [1, 2.1, 3 / 5, 7 - 2]
liste2 = ["maison", "poisson", "c'est une phrase"]
liste3 = [1, "cheval"]
liste4 = ["a", 11, [1, ["x", "y"]], liste2]

# création de liste "en compréhension"
liste5 = [x for x in range(1, 10) if x % 2 == 1] # liste des nombres impairs entre 1 et 9
liste6 = [d for d in range(1, 100) if 100 % d == 0] # liste des diviseurs de 100

# remarque : on peut ré-écrire la procédure AfficheDiviseurs sous la forme
def AfficheListeDiviseurs(n):
    print([d for d in range(1, n) if n % d == 0])

liste7 = [d for d in liste6 if d % 2 == 1] # liste des diviseurs impairs de 100
liste8 = [n * 10 for n in liste7] # on multiplie chaque élément de liste7 par 10

liste9 = [(a, b) for a in range(0, 20) for b in range(0, 1)]
liste10 = [s for s in ["asfdrt", "dfts", "dfgrt", "er", "hjyfd"] if len(s) <= 4] # len donne la longueur (nombre de caractères) d'une chaîne de caractères

voyelles = ["a", "e", "i", "o", "u", "y"]
doublesVoyelles = [u + v for u in voyelles for v in voyelles]
listeDeuxVoyelles = [[u, v] for u in voyelles for v in voyelles if u < v]

Actions, opérations et fonctions sur les listes

# affichage de listes
print(liste1) # les opérations à l'intérieur de la liste sont effectuées
print(liste4)

# opérations sur les listes
print(liste1 + liste2)
print(liste2 + ["chien"]) # équivaut à liste2.append("chien")
print(liste3 * 2)

# indices
voyelles = ["a", "e", "i", "o", "u"]
print(voyelles[0]) # premier élément de la liste (indice 0)
print(voyelles[2]) # troisième élément de la liste (indice 2)
print(voyelles[1:4]) # de l'élément d'indice 1 inclus à l'élément d'indice 4 exclu ; remplacer [1:4] par [1:] puis par [2:-1] puis par [2:0]

# quelques fonctions
print(len(voyelles)) # longueur de la liste
print(sum([1, 2, 3, 4])) # somme des éléments
print(max([3, 1, 4, 2])) # maximum ; de même pour min
print("la somme des éléments de la liste [1, 2, 3] est égale à " + str(sum([1, 2, 3])))

# remarque : la fonction range ne donne pas une liste, mais on peut transformer le résultat en liste :
print(range(0, 10))
print(list(range(0, 10)))

Exercices

  1. liste des 10 premiers multiples de 12
  2. écrire un programme qui demande deux nombres entiers n et k et affiche la liste des k premiers multiples de n
  3. écrire un programme qui construit une liste de 10 nombres entiers choisis au hasard entre 1 et 100, affiche cette liste et le plus grand élément de la liste
  4. écrire un programme qui, étant donnée une liste, affiche cette liste écrite en ordre inverse (par exemple affiche [« a », « r », « e »] si on lui a donné [« e », « r », « a »]
  5. écrire un programme qui, étant donnée une liste de nombres entiers, affiche la liste de ces nombres classés dans l’ordre croissant

Attention : dans les programmes 4 et 5, si on demande la liste à l’utilisateur en utilisant input, on se heurte à une difficulté : input renvoie une chaîne de caractères. Et il n’existe pas de fonction permettant de convertir une liste en chaîne de caractères. Donc, pour les exercices 4 et 5, il vaut mieux fournir la liste au programme dans une variable.
Sinon, une première solution consiste à demander les éléments 1 par 1, éventuellement les convertir en nombres (exercice 5) et construire la liste au fur et à mesure.
Exemple :

n = input("combien d'éléments dans la liste ? :")
liste = []
for i in range(0, int(n)):
    a = input("donnez un nombre :")
    liste = liste + [int(a)]
print(liste)

Une deuxième solution serait de :

  • demander à l’utilisateur de fournir les éléments de la liste séparés par une virgule : par exemple 12,14,11,3
  • d’utiliser split(« , ») pour en faire une liste
  • de convertir tous les éléments en liste en nombre entiers

(ceci ne fonctionne pas avec des listes de chaînes si certaines chaînes contiennent plusieurs mots)
Exemple :

réponse = input("écrire les éléments de la liste de nombres entiers séparés par des espaces : ")  # par exemple rep = "12,14,11,3" qui est une chaine de caractères
liste = réponse.split(",")  # liste = ["12", "14", "11", "3"] est une liste de chaînes de caractères
liste1 = []
for x in liste:
    liste1 = liste1 + [int(x)] # chaque élément de la liste est converti en nombre entier : par exemple "12" est remplacé par 12
print(liste1) # liste1 = [12, 14, 11, 3] 

Corrigé des exercices

Remarque : ne pas donner aux variables un nom qui correspond à un mot-clé python, par exemple int, def, str, ...
par exemple :

max = 3
print(max([23, 45, 12]))

affiche cette erreur :

Traceback (most recent call last):
File « /usr/lib/python3.10/idlelib/run.py », line 578, in runcode
exec(code, self.locals)
File « <pyshell#1> », line 1, in <module>
TypeError: ’int’ object is not callable

Dans la dernière ligne du message d’erreur ’int’ object is not callable signifie que dans la ligne du programme print(max([23 45, 12])) le nombre (int) max n’est pas une fonction donc ne peut pas être appelé (callable)
Exercice 1

multiples12 =  [12 * i for i in range(1, 11))
# ou bien : 
# multiples12 = [12 * (i + 1) for i in range(0, 12)]

Exercice 2

k = input("combien voulez de multiples ? :")
n = input("multiples de quel nombre ? :")
print([i * n for i in range(1, n + 1)])
# ou bien :
# print([(i + 1) * n for i in range(0, n)])

Exercice 3

from random import randint
lst = [randint(1, 100) for i in range(0, 100)]
print("le plus grand élément de " + lst + " est " + max(lst))

Exercice 4

lst = [3, 8, "a", 0]
print([lst[3 - i] for i in range(0, 4)])
# plus généralement :
# [lst[len(lst) - 1 - i] for i in range(0, len(lst))]
# ou bien :
def Inverse(lst):
    dest = []
    indiceMax = len(lst) - 1
    for i in range(0, len(lst)):
        dest = dest + [lst[indiceMax - i]]
    print(dest)
Inverse([3, 8, "a", 0])

Exercice 5

def Tri(lst):
    dest = []
    for i in range(0, len(lst)):
        minimum = lst[0]
        indexMinimum = 0
        for j in range(0, len(lst)):
            if lst[j] < minimum:
                minimum = lst[j]
                indexMinimum = j
        dest = dest + [minimum]
        lst = lst[0:indexMinimum] + lst[indexMinimum + 1:len(lst)]
    print(dest)
tri([10, 30, 20, 5, 20, 40, 3]))

Procédures et fonctions

structure de boucle avec des cartes perforées _ métiers Jacquard.jpg

Définition

Jusqu’ici à l’aide du mot-clé def nous avons défini des procédures : ce sont programmes qui exécutent des actions en utilisant des données que nous leur fournissons,

  • soit par l’intermédiaire de paramètres,
  • soit en utilisant des variables (locales) à l’intérieur de ces procédures.

def permet de définir aussi des fonctions : ce sont des programmes qui exécutent des actions mais qui, de plus, renvoient un résultat, à l’aide du mot-clé return

Exemples

(J’utilise personnellement une convention : si une procédure est une fonction, son nom commence par une minuscule.)

def impairs(lst):
    """ Renvoie la liste des nombres impairs appartenant à la liste lst """
    return [x for x in lst if x % 2 == 1]

def sommePlusGrands(a, lst):
    """ renvoie la somme des nombres plus grands que a dans la liste lst """
    s = 0
    for x in lst:
        if x > a:
            s = s + x
    return s

def sommeImpairsPlusGrands(a, lst):
    """ renvoie la somme des éléments de la liste lst qui sont impairs et plus grands que a """
    return sommePlusGrands(a, impairs(lst))

liste1 = [1, 100, 35, 30, 15]
print(liste1)
print(impairs(liste1))
print(sommePlusGrands(10, liste1))
print(sommeImpairsPlusGrands(10, liste1))

Récursion

def factorielle(n):
    if n == 0:
        return 1
    else:
        return n * factorielle(n - 1)

print(factorielle(5))

Projet : conjecture de Syracuse

Graphiques : matplotlib et turtle

turtle

On va utiliser le module turtle (tortue) qui est installé avec python.
Ce module implémente la « tortue Logo » inventée vers 1980 par Seymour Papert sous l’influence du courant cognitiviste en intelligence artificielle (Marvin Minsky) et du psychologue Jean Piaget. La tortue est alors un objet graphique piloté par un programme écrit en Logo, langage dérivé du langage Lisp. Depuis, des versions de cette tortue ont vu le jour dans de nombreux langages de programmation. En python, le module turtle permet d’utiliser cette fonctionnalité.
La documentation en français est ici : https://docs.python.org/fr/3.9/library/turtle.html
Après avoir importé ce module dans la session, on dispose de fonctions qui permettent de créer un objet turtle qui peut se déplacer en dessinant (ou non), exécutant les fonctions python fournies par le module.

Quelques exemples

# les 3 lignes qui suivent doivent être écrites au début de votre session python 
# DANS LES EXEMPLES QUI SUIVRONT JE NE RÉPÈTERAI PAS CES 3 LIGNES 
import importlib # bibliothèque utilitaireUne des méthodes pour dessiner en python est d'utiliser le module /turtle/.
import turtle # on importe le module
importlib.reload(turtle) # permet de reinitialiser le système graphique de la tortue

t1 = turtle.Turtle() # on crée une tortue, c'est à dire un objet, instance de la classe Tortue
t1.fd(100) # (forward) avancer de 100 pas dans la direction où est la tortue
t1.rt(90) # (right) tourner à droite de 90°
t1.bk(200) # (back) reculer de 200 pas
t1.lt(60) # (left) tourner à gauche de 60°
for n in range(0, 4): # dessiner 4 tirets
    t1.fd(50) # avancer de 150 pas
    t1.penup() # lever le crayon (au départ il est baissé)
    t1.fd(50) # avancer de 50 pas, sans dessiner, donc
    t1.pendown() # abaisser le crayon
    
t2 = turtle.Turtle() # on crée une autre tortue
t2.pencolor("red") # pour dessiner en rouge
t2.penup()
t2.rt(100)
t2.fd(200)

t2.setpos(-100, -50) # aller jusqu'au point de coordonnées (-100, -50)

turtle.mainloop() # nécessaire pour que la fenêtre graphique reste affichée après l'exécution du programme 

Dessiner un carré

On peut utiliser une tortue dans une fonction. On va dans cas inclure une paramètre désignant cette tortue

def Carré(tort, côté):
    # tort est le paramètre désignant la tortue, il faudra lui assigner un objet tortue créé avant l'exécution
    # côté est la longueur du côté du carré (en unités graphiques)
    for n in range(0, 4): # boucle pour les 4 côtés
        tort.fd(côté) # on dessine un coté
        tort.lt(90) # on tourne à gauche de 90°

# pour exécuter :
tortue1 = turtle.Turtle() # on crée une tortue
Carré(tortue1, 100) # on appelle la fonction

turtle.mainloop()

Dessiner des polygones réguliers

On généralise la procédure précédente à un polygone régulier à n côtés.

def Poly(tort, côté, nbCôtés):
    # remplissage
    for n in range(0, nbCôtés):
        tort.fd(côté)
        tort.lt(360 / nbCôtés)

# pour exécuter
t1 = turtle.Turtle()
Poly(t1, 20, 12) # dodécagone de côté 20
turtle.mainloop()

Remarque : dans la fonction Poly, si vous insérez avant la boucle les deux lignes

tort.fillcolor("red") # couleur de remplissage
tort.begin_fill()  # début du coloriage de l'intérieur

et après la boucle la ligne

tort.end_fill() # fin du coloriage de l'intérieur

vous obtiendrez un polygone dont l’intérieur est colorié.

Dessiner une rosace

Comme d’habitude en python, une fonction (ici Poly) peut être appelée par une autre fonction (ici Rosace)

def Rosace(tort, côté, nbCôtés, nbPolys):
    for n in range(0, nbPolys):
        Poly(tort, côté, nbCôtés)
        tort.lt(360 / nbPolys)

t = turtle.Turtle()
Rosace(t, 15, 6, 20) # rosace obtenue en faisant tourner 20 fois un hexagone de côté 15
turtle.mainloop()

matplotlib et numpy   20240503

Pour utiliser matplotlib il faut l’installer

  • sous Windows :

clic-droit sur l’icône Windows, Terminal (administration), valider en cliquant sur OUI, puis taper :
py -m ensurepip --default-pip
puis : py -m pip install -U matplotlib
puis : py -m pip install numpy

  • sous Linux :

dans le terminal taper :
sudo apt install python3-pip
puis : python -m pip install -U matplotlib
puis : *python -m pip install numpy
introduction à matplotlib
exemple 1 : méthode de Monte-Carlo
exemple 2 : parties aliquotes d’un entier
matplotlib: compléments

Résumé :noexport:**** Les instructions d’entrée-sortie

affichage : print
print("bonjour") # imprime et passe à la ligne, 
print(1, 2, 3) # imprime les nombres en les séparant par un espace et passe à la ligne à la fin
print("bonjour", end="") # imprime sans passer à la ligne
print(1, 2, 3, sep=", ", end=" - ") # imprime les nombres en les séparant par une virgule et un espace ; met un tiret en fin de ligne, sans passer à la ligne
saisie : input
s = input("votre réponse : ") # ouvre une boîte de saisie avec le message votre réponse et met la réponse (sous forme de chaîne de caractères) dans la variable s

Les instructions de contrôle

Conditions
if
if condition1:
                instructions à exécuter si la condition 1 est vérifiée
elif condition2:
                instructions à exécuter si la condition 2 est vérifiée
...
else:
                sinon ...
match
match valeur:
                case valeur1:
                                instructions1
                case valeur2:
                                instructions2
                ...
                case _: 
                        instructions
Répétitions (boucles)
for

cette boucle est employée en général lorsqu’on connaît d’avance le nombre de répétitions

for i in range(0, 10):
    instructions à répéter 10 fois (pour i de 0 à 9)
while

cette boucle - plus générale - est employée lorsque la répétition dépend d’une condition

while condition:
    instructions à répéter tant que la condition est vraie
Fonctions
def

permet de définir une fonction

def répétition(n): # va imprimer les entiers de 0 à n - 1
    for i in range(0, n):
        print(i)
import
import module # importe toutes les fonctions du module ; une fonction nommée test dans le module sera utilisée sous la forme module.test
from module import test # importe la fonction test à partir du module ; cette fonction sera utilisée sous la forme test
from module import test as f # f devient un alias de test ; cette fonction sera utilisée sous le forme f

Fonctions et opérations sur les données

sur les nombres
sur les chaînes de caractères
sur les listes